<template>
	<view id="Activities">
		<view class="title-area">
			<view class="status-bar-fixed" style="height: var(--status-bar-height);">
				<!-- 所有自定义导航都要加这个，用来处理小程序显示时的手机信号那一栏的高度 -->
			</view>
			活动详情
		</view>
		<view class="line"></view>
		<view class="top-img"></view>
		<view class="lower-place">
			<view class="lower-topic">
				两岸雾峰林家后人代表赴漳州平和祭祖
			</view>
			<view class="content">
				<view class="lower-line">
					<view class="img"></view>
					<view class="line-text">
						时间 2022-2-31 8:00
					</view>
				</view>
				<view class="lower-line">
					<view class="img"></view>
					<view class="line-text">
						地点 四坪“乡愁”长廊
					</view>
				</view>
				<view class="lower-line">
					<view class="img"></view>
					<view class="line-text">
						活动名额 50人
					</view>
				</view>
				<view class="board-1">
					<view class="img-board"></view>
					<view class="text-board">
						<view class="text-up">距离您233.3公里</view>
						<view class="text-down">漳州和平五寨乡埔坪村</view>
					</view>
					<view class="btn">&gt</view>
				</view>
				<view class="lower-line">
					<view class="img"></view>
					<view class="line-text">
						活动已有30人报名 &gt
					</view>
				</view>
				<view class="board-2">
					<view class="board-title">
						活动详情
					</view>
					<view class="board-text">
						10月16日，台湾抗日志士亲属协进会福建参访团一行来到漳州市平和县五寨乡埔坪村，两岸雾峰林家后人代表在众多宗亲、耆老的见证下，举行了隆重的祭祖典礼。
					</view>
					<view class="board-text">
						晌午时分，参访团一行来到埔坪村，受到了林氏宗亲的夹道欢迎。林氏大宗祠内外高挂着大红灯笼，“热烈欢迎台湾宗亲回乡谒祖省亲”……
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//朱熙然 @ 5月14日 页面
</script>

<style lang="less">
	 @import url(./shared.less);
	 @content-size: 25rpx;
	 #Activities{
		padding-top: 40rpx;
		.title-area{
		 	text-align: center;
		 	font-size: 45rpx;
		}
		.line{
		    width: 100%;
		    height: 1rpx;
		    margin-top: 30rpx;
		    background: #d4c4c4;
		    position: relative;
		    text-align: center;
		}
		.top-img{
			width: 690rpx;
			height: 337rpx;
		    margin: 0 auto;
			background: url("https://www.lin-home.com/api/holder/img690x337") 50% 50% / cover;
		}
		.lower-place{
			width:690rpx;
			margin: 0 auto;
			.lower-topic{
			    height: 90rpx;
				padding-top: 20rpx;
				font-size: 32rpx;
				border-bottom: 8rpx solid;
				border-image: linear-gradient(to right, #7E8CA5, #CACDD2) 1 1 1 1;
				line-height: 90rpx;
			}
			.content{
				view:first-child{
					margin-top: 20rpx;
				}
				.lower-line{
					height: 55rpx;
					display: flex;
					align-items: center;
					.img{
						margin-left: 30rpx;
						width: 35rpx;
						height: 35rpx;
						background: url("https://www.lin-home.com/api/holder/img35x35") 50% 50% / cover;
				    }
					.line-text{
						margin-top: calc(27.5rpx - 10rpx);
						margin-left: 18rpx;
						font-size: 20rpx;
					}
				}
				.board-1{
					width: 634rpx;
					height: 137rpx;
					margin: 30rpx auto 0 auto;
					background-color: #EBF3F8;
					border-radius: 20rpx;
					display: flex;
					.img-board{
						width: 110rpx;
						height: 100rpx;
						margin-left: 30rpx;
						background: url("https://www.lin-home.com/api/holder/img35x35") 50% 50% / cover;
					}
					.text-board{
						.text-up{
							margin-left: 20rpx;
							padding-top: 5rpx;
							font-size: 32rpx;
						}
						.text-down{
							margin-left: 35rpx;
							margin-top: 12rpx;
							font-size: @content-size;
						}	
					}
					.btn{
						margin-left: 150rpx;
						font-size: 50rpx;
						margin-top: calc(66.5rpx - 25rpx)
					}
				}
				.board-2{
					width: 690rpx;
					height: 400rpx;
					margin: 30rpx auto 0 auto;
					background-color: #EBF3F8;
					border-radius: 20rpx;
					.board-title{
						width: 630rpx;
						height: 50rpx;
						padding-top: 20rpx;
						margin: 0 auto;
						font-size: @content-size;
						line-height: 50rpx;
						border-bottom: 8rpx solid;
						border-image: linear-gradient(to right, #7E8CA5, #CACDD2) 1 1 1 1;
					}
					.board-text{
						width: 630rpx;
						padding-top: 20rpx;
						margin: 0 auto;
						font-size: @content-size;
					}
				}
			}
		}
	}
</style>